import { useEffect, useState } from "react";
import { getTableApi, getToken } from "../utils/client";
import CodeEditor from '@uiw/react-textarea-code-editor';


export interface CreateTableProps {
    curClientId: string;
    curDatabase: string;
    curTable: string;
}

function CreateTable(props: CreateTableProps) {
    const [sql, setSql] = useState("");

    const loadCreateSql = async () => {
        const client = getTableApi();
        const res = await client.tableRawQueryPost({
            tableRawQueryPostRequest: {
                id: props.curClientId,
                token: getToken(),
                sql: `SHOW CREATE TABLE ${props.curDatabase}.${props.curTable}`,
            },
        });
        if (res.values !== undefined) {
            setSql(res.values[0][1]);
        }
    };
    useEffect(() => {
        if (props.curClientId !== "" && props.curDatabase !== "" && props.curTable !== "") {
            loadCreateSql();
        } else {
            setSql("");
        }
    }, [props.curClientId, props.curDatabase, props.curTable]);

    return (
        <CodeEditor
            value={sql}
            language="sql"
            minHeight={200}
            readOnly
            style={{
                fontSize: 14,
                backgroundColor: '#f5f5f5',
            }}
        />

    );
}

export default CreateTable;